{% extends "base.html" %}
{% block header %}微信支付{% endblock %}
{% block content %}
<div class="card shadow-sm rounded p-4 mb-4">
    <h4 class="mb-3">订单支付</h4>
    <p>订单号：{{ order.order_no }}</p>
    <p>订单类型：{{ order.get_order_type_display }}</p>
    <p>金额：{{ order.amount }} 元</p>
    <p>请使用微信扫码完成支付。</p>
    {% if pay_params.code_url %}
    <div class="mb-3">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ pay_params.code_url }}" alt="微信支付二维码" />
        <p class="mt-2">请使用微信扫描二维码完成支付</p>
    </div>
    <form id="paySuccessForm" method="post" action="/order/pay/success/{{ order.id }}/" style="display:none;">
        {% csrf_token %}
    </form>
    <script>
    let queryCount = 0;
    function queryPayStatus() {
        fetch('/api/order/query_pay/?order_no={{ order.order_no }}')
            .then(r => r.json())
            .then(data => {
                if (data.is_paid) {
                    document.getElementById('paySuccessForm').submit();
                } else {
                    queryCount++;
                    if (queryCount < 60) setTimeout(queryPayStatus, 3000);
                }
            });
    }
    window.onload = function() {
        setTimeout(queryPayStatus, 3000);
    };
    </script>
    {% else %}
    <script>
    window.onload = function() {
        var msg = '';
        {% if pay_params.return_msg %}
            msg += '微信接口返回：{{ pay_params.return_msg }}\n';
        {% endif %}
        {% if pay_params.err_code_des %}
            msg += '错误详情：{{ pay_params.err_code_des }}';
        {% endif %}
        if (!msg) msg = '未获取到支付二维码，请稍后重试。';
    };
    </script>
    <p class="text-danger">未获取到支付二维码，请稍后重试。</p>
    {% if pay_params.return_msg %}
    <div class="alert alert-danger mt-3">微信接口返回：{{ pay_params.return_msg }}</div>
    {% endif %}
    {% if pay_params.err_code_des %}
    <div class="alert alert-danger mt-1">错误详情：{{ pay_params.err_code_des }}</div>
    {% endif %}
    {% endif %}
</div>
{% endblock %}
